<template>
  <el-container>
    <el-aside width="10rem" :key="key">
      <div class="aside-bar">
        <el-menu
          :default-active="allBusState"
          text-color="#747774"
          active-text-color="#013D87"
          router
        >
          <el-menu-item
            :index="basicInfo"
            class="aside-client"
            @click="changeAllBusState(basicInfo)"
          >
            <div :class="[basicInfo == allBusState ? 'asidelog-active' : 'asidelog']"></div>
            <div class="cient-name">{{welcomText}}</div>
          </el-menu-item>
          <el-menu-item
            :index="register"
            :class="[allBusState == register ? 'register-active' : 'register']"
            @click="changeAllBusState(register)"
          >
            <i></i>
            <span slot="title">商标注册</span>
          </el-menu-item>
          <el-menu-item
            :index="businessclou"
            :class="[allBusState == businessclou ? 'later-active' : 'later']"
            @click="changeAllBusState(businessclou)"
          >
            <i></i>
            <span slot="title">商标后续</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <el-main height="100%">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import urlData from "../../assets/js/urlData.json";
export default {
  data() {
    return {
      register: "/business/allBusiness/register?id=1",
      businessclou: "/business/allBusiness/businessclou",
      BashStep: "/business/allBusiness/BashStep?id=25",
      key: 1,
    };
  },
  methods: {
    ...mapMutations(["changeAllBusState"]),
    // 通过监听路径变化,改变侧边栏状态
    observePath() {
      let path = location.pathname;
      path === "/business/allBusiness/register" &&
        this.changeAllBusState(this.register);
      path === "/business/allBusiness/BashStep" &&
        this.changeAllBusState(this.BashStep);
      /.*(businessclou|information|perfectOne)$/i.test(path) &&
        this.changeAllBusState(path);
      this.key++;
    },
    changeAllBusState(){
      if( this.$route.query.id == 1){
        console.log("点击方法");
        // console.log(this.$route.query.id);
        // urlData[this.$route.query.id];
      }
    }
  },
  watch: {
    basicInfo: function () {
      this.key++;
      console.log(this.key);
    },
  },
  computed: {
    ...mapState(["allBusState"]),
    ...mapGetters(["basicInfo","welcomText"]),
  },
  created() {
    window.addEventListener("popstate", this.observePath);
  },
  beforeDestroy() {
    window.removeEventListener("popstate", this.observePath);
  },
};
</script>
<style lang="less" scoped>
.el-container {
  height: calc(100% - 4.3rem);
}
.el-main {
  height: 100%;
  overflow-y: auto;
}
.el-aside {
  background-color: #fff;
  .aside-bar {
    .el-menu {
      border: none;
      .aside-client {
        border-top: 1px solid #f1f1f1;
        height: 4.6rem;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .asidelog {
          height: 2rem;
          width: 2rem;
          background: url(../../assets/imgs/business/head.png) no-repeat;
          background-size: cover;
        }
        .asidelog-active {
          height: 2rem;
          width: 2rem;
          background: url(../../assets/imgs/business/head-active.png) no-repeat;
          background-size: cover;
        }
        .cient-name {
          font-size: 20px;
          margin-left: 0.4rem;
        }
      }
    }
    .is-active {
      border-left: 4px solid #013d87;
      font-weight: bold;
      background-color: rgba(142, 183, 233, 0.2);
      padding-left: 16px !important;
    }
    .el-menu-item {
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 1em;
      color: #747774;
      i {
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        margin-right: 0.5rem;
        vertical-align: middle;
        margin-left: 1.5rem;
      }
    }
    .register i {
      background: url(../../assets/imgs/business/icon-register.png) center
        no-repeat;
      background-size: contain;
    }
    .register-active i {
      background: url(../../assets/imgs/business/icon-register-active.png)
        center no-repeat;
      background-size: contain;
    }
    .later i {
      background: url(../../assets/imgs/business/icon-later.png) center
        no-repeat;
      background-size: contain;
    }
    .later-active i {
      background: url(../../assets/imgs/business/icon-later-active.png) center
        no-repeat;
      background-size: contain;
    }
    .madrid i {
      background: url(../../assets/imgs/business/icon-madrid.png) center
        no-repeat;
      background-size: contain;
    }
    .madrid-active i {
      background: url(../../assets/imgs/business/icon-madrid-active.png) center
        no-repeat;
      background-size: contain;
    }
  }
}
.el-main {
  background-color: #f7f7f7;
}
</style>